<template>
    <div>
        <el-table :data="classList" border>
            <el-table-column align="center" prop="id"  label="班级id"></el-table-column>
            <el-table-column align="center" prop="className"  label="班级名称"></el-table-column>
            <el-table-column align="center"  label="操作">
              <template slot-scope="scope">
                <el-button type="success" @click="fenpeiKc(scope.row)">分配课程</el-button>
              </template>
            </el-table-column>
        </el-table>
      <el-dialog
          :visible.sync="dialogVisible"
          title="分配课程"
          width="30%"
      >
        <el-form>
          <el-form-item v-for="(course,index) of courseList" :key="course.id" :label="course.courseName">
              <el-select v-model.sync="courseList[index].teacherId">
                <el-option :value="null" label="未选择"></el-option>
                <el-option v-for="(teacher,index) of course.teachers" :value="teacher.id" :label="teacher.teacherName" :key="index" >
                </el-option>
              </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="sub">
          提交
        </el-button>
      </span>
        </template>
      </el-dialog>
    </div>
</template>

<script>
export default {
  created() {
    this.searchClass()
  },
  data(){
    return{
      form:{},
      dialogVisible:false,
        classList:[],
      courseList:[]
    }
  },
  methods:{
    searchClass(){
      this.request.get("/class").then(resp=>{
          this.classList = resp.data
      })
    },
    fenpeiKc(row){
      this.dialogVisible = true
      this.request.get("/class/getCourse/"+row.id).then(resp=>{
          this.courseList = resp.data
      })
    },
    sub(){
      this.request.post("/class/saveCourseClass",this.courseList).then(resp=>{
        this.$message.success("选课成功");
        this.dialogVisible = false
      })
    }
  }
}
</script>

<style>

</style>